<script lang="ts" setup name="Login">
import { reactive,toRefs } from "vue"
import { storeToRefs } from "pinia"
import imgLogin from "@/assets/png/WechatIMG119.jpg"
import LoginRead from './login_readme.vue'
import { localStorage } from '@/utils/local-storage'
import { STORAGE_TOKEN_KEY } from '@/stores/mutation-type'
import { login} from '@/api/home'
import useCounterStore from "@/stores/modules/counter"


const from  = reactive({
    username:'',
    password:''
})
const { password,username}  = toRefs(from)
const flg = ref(true)
const counterStore = useCounterStore()
const { isLogin } = storeToRefs(counterStore)
const gotoShow = () =>{
    flg.value = false
}
const onSubmit = (values:any) =>{
    login(values).then(res=>{
        // @ts-ignore
        if(res.result){
            localStorage.set(STORAGE_TOKEN_KEY,`Bearer ${res['token']}` )
            localStorage.set('username',res['username'])
            counterStore.isLoginChange(true)
            location.reload()
        }
    })
} 
const getFly = (x) =>{
    flg.value = x
} 
</script>
<template>
    <div class="login_page" v-if="!isLogin">
        <div v-if="flg" class="login">
            <van-form @submit="onSubmit">
            <van-cell-group style="display: flex;justify-content: center;">
                <van-image height="40" fit="fill" :src="imgLogin" alt="" />
            </van-cell-group>
            <van-cell-group inset>
                <van-field
                v-model="username"
                name="username"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
                />
            </van-cell-group>
            <div style="display: flex;justify-content: center;"> 
                <van-checkbox v-model="flg"> 勾选代表您同意</van-checkbox><p style="color: rgb(57, 120, 255);" @click="gotoShow">《知世智能声明》</p>
               </div>
            <div style="margin: 16px;width: 50%;margin: 0 auto;margin-top: 10px;">
                <van-button round block size="small" type="primary" native-type="submit">
                登录
                </van-button>
            </div>
        </van-form>

        </div>
         <LoginRead v-else :sendFly="getFly"></LoginRead>
       
    </div>
</template>
<style lang="less" scoped>
.login_page{
    position:fixed;
    background-color: rgba(193, 193, 193,0.5);
    height: 100%;
    width: 100%;
    z-index: 999;
  
}
.login{
    margin: 10px;
    margin-top: 50%;
    padding:10px 0;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
}
</style>